<template>
  <div>
    <Banner :banners="banners"></Banner>
    <HotSongList :hotSongList1="hotSongList1" :hotSongList2="hotSongList2" :hotSongList3="hotSongList3"></HotSongList>
    <RecommentMV :MVs="MVs"></RecommentMV>
    <NewDisc :newDisc1="newDisc1" :newDisc2="newDisc2"></NewDisc>
  </div>
</template>

<script>
import Banner from "./Banner"
import HotSongList from "./HotSongList"
import RecommentMV from "./RecommentMV"
import NewDisc from "./NewDisc"

import { getHomeBanner, getHotSongList, getNewDisc, getRecommentMV } from "../../../network/home"

export default {
  name: "MusicHall_Page",
  components: {
    Banner,
    HotSongList,
    RecommentMV,
    NewDisc
  },
  data() {
    return {
      banners: [],
      hotSongList1: [],
      hotSongList2: [],
      hotSongList3: [],
      newDisc1: [],
      newDisc2: [],
      MVs: [],
    }
  },
  created() {
    this.getHomeBanner();
    this.getHotSongList();
    this.getRecommentMV();
    this.getNewDisc();
  },
  methods: {
    getHomeBanner() {
      getHomeBanner().then(res => {
        this.banners = res.data.banners;
      })
    },
    getHotSongList() {
      getHotSongList().then(res => {
        this.hotSongList1 = res.data.result.slice(0, 6);
        this.hotSongList2 = res.data.result.slice(6, 12);
        this.hotSongList3 = res.data.result.slice(12);
      })
    },
    getNewDisc() {
      getNewDisc().then(res => {
        this.newDisc1 = res.data.albums.slice(0, 8);
        this.newDisc2 = res.data.albums.slice(8);
      })
    },
    getRecommentMV() {
      getRecommentMV().then(res => {
        this.MVs = [];
        for (let i = 0; i < res.data.result.length; i++) {
          this.MVs.push({
            id: res.data.result[i].id,
            picUrl: res.data.result[i].picUrl,
            name: res.data.result[i].name,
            songer: this.formatSonger(res.data.result[i].artists),
            songerId: res.data.result[i].artistId,
            playCount: res.data.result[i].playCount,
          })
        }
      })
    },
    formatSonger(songer) {
      let result = [];
      for (let i in songer) {
        result.push(songer[i].name)
      }
      return result.join("/");
    }
  }
}
</script>

<style scoped>
</style>